<template>
	<div class="signin pos-re"
		 :class="bgs[sj]">
		<form class="main oneline">
			<h2 class="title clr0"
				v-text="Lang.title[lang]"></h2>
			<div class="label"
				 v-text="Lang.formLabel[lang][0]"/>
			<hb-input @ipt="e_ipt"
					  formType="user"
					  back="user"/>
			<div class="label"
				 v-text="Lang.formLabel[lang][1]"/>
			<hb-signupPassword @ipt="e_ipt"
							   :hiddTip="true"
							   back="password"
							   @etr="e_step"/>
			<div class="btnbox flex ">
				<hb-button :txt="Lang.button[lang][0]"
						   @clk="e_step"/>
				<hb-button2 class="forget"
							:txt="Lang.button[lang][1]"
							@clk="e_page_('/forgotpwd')"/>
			</div>
		</form>
		<div class="r oneline">
			<div class="signuptxtbox flex">
				<span v-text="Lang.talk[lang][0]"/>
				<span v-text="Lang.talk[lang][1]"/>
			</div>
			<div>
				<hb-button2 class="signupbtn"
							:txt="Lang.button[lang][2]"
							@clk="e_page_('/signup')"/>
			</div>
		</div>

		<hb-dialog v-if="showMsg"
				   @clk="msgBack = ''">
			<h3 class="msg"
				v-text="msgBack"/>

		</hb-dialog>
	</div>
</template>

<script>
	import Lang from './lang'
	import {vpost, vlink, kpost, klink} from '@api'

	export default {
		name: 'signin',
		data() {
			return {
				Lang,
				bgs: {
					white: 'hbsj-bgwhite',
					black: 'hbsj-bgblack',
				},
				form: {
					user: null,
					password: null,
				},
				checkRe: {
					user: false,
					password: false,
				},
				msgBack: '',
			}
		},
		computed: {
			lang() {
				return this.$store.state.setting.lang
			},
			sj() {
				return this.$store.state.setting.subject
			},
			showMsg() {
				return this.msgBack !== ''
			},
		},
		created() {
		},
		methods: {
			e_ipt(re, inputed, back) {
				this.checkRe[back] = re
				this.form[back] = inputed
			},
			e_step() {
				let checkRe = this.getCheckRe()
				if (!checkRe) {
					this.msgBack = '您有必填项未完善'
					return false
				}
				this.api_signin()
			},
			getCheckRe() {
				let box = this.checkRe
				return box.user && box.password
			},
			async api_signin() {
				let box = this.form
				let setting = {
					loginName: box.user,
					password: box.password,
				}
				await vpost(vlink.user.signin, setting).then(re => {
					let reb = re.code == 0
					this.afterHandle(re.msg, reb, re.fid)
					this.$store.commit('set_user_uid', re.fid)
				})
			},
			afterHandle(msg, b, fid) {
				// 设置vuex, session, 跳转页面
				if (msg == 114) {
					this.msgBack = '登录成功'
				} else {
					this.msgBack = msg
				}


				let setx = (w, t) => {
					this.$store.commit('set_user_' + w, t)
				}
				let setsn = (w, t) => {
					sessionStorage[w] = t
				}
				setTimeout(() => {
					this.msgBack = ''
					if (b) {
                        // setx('signed', true)
                        console.log(this.form.user);
                        this.$store.state.user.signed = true
                        this.$store.state.user.name = this.form.user
                        this.$store.state.user.uid = fid
                        this.$store.state.user.signed = '1'
                        // this.$store.state.user.name = this.form.user
                        this.$store.state.user.uid = fid

						// setx('name', this.form.user)
						// setx('uid', fid)
						setsn('signed', '1')
						setsn('name', this.form.user)
						setsn('uid', fid)
						if (this.$mengxin) {
							this.$router.push('/')
						} else {
							this.$router.back(-1)
						}
					}
				}, 1500)
			},
			e_page_(s) {
				this.$router.push(s)
			},
		},
	}
</script>

<style scoped>
	.signin {
		white-space: nowrap;
		text-align: center;
	}

	.main {
		margin: 150px 0 0 0;
		width: 520px;
		text-align: left;
	}

	.title {
		margin: 0;
		font-size: 36px;
		font-weight: 400;
	}

	.label {
		margin: 15px 0 5px;
		font-size: 14px;
		color: #61688a;
	}

	.btnbox {
		margin-top: 40px;
		align-items: center;
	}

	.forget {
		margin-left: 30px;
	}

	.r {
		margin-left: 40px;
		text-align: left;
	}

	.signuptxtbox {
		margin: 240px 0 0 0;
		flex-direction: column;
		color: #61688a;
	}

	.signupbtn {
		margin-top: 20px;
	}

	.msg {
		margin: 20px;
		color: var(--clr0);
	}
</style>
